<template>
	<view class="regressiveintegral">
		<view class="model" v-if="isModel">
			<view class="model-box">
				<view class="model-title">
					非商品质量问题无法退货退款
				</view>
				<view class="shuoming">
					请在我的界面联系客服进行退积分
					说明
				</view>
				<view class="btn-know" @click="btnKnow">
					我知道了
				</view>
			</view>
		</view>
		<view v-else>
			
		<view class="shop-box">
			<view class="shop-box-bottom">
				<image class="shop-box-bottom-img" src="../../../static/healthy/zhongyao.png" mode=""></image>
				<view class="shop-box-right">
					<text class="title">植物护洗手液免洗漱75%酒洗漱75%酒</text>
					<text class="specs">免洗手凝胶80ml <text class="num" style="margin-left: 20rpx;">3瓶</text></text>
					<text class="paidintegral">实付积分：2700</text>
				</view>
			</view>
		</view>
		<view class="instructions">
			<view class="instructions-title">
				换货说明：
			</view>
			<textarea @blur="bindTextAreaBlur" style="margin-top: 10rpx;" placeholder-style="{color:#999999,fontSize:16px}" placeholder="选填" auto-height />
		</view>
		<view class="btn" @click="submit">
			提交
			</view>
		</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isModel:true
			}
		},
		methods: {
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value,'输入框的值')
			},
			btnKnow(){
				this.isModel=false
			},
			submit(){
				uni.navigateTo({
					url:'/myPackageA/mine/myOrder/myOrder?current=3'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	//弹框
	.model{
		padding: 200rpx 100rpx;
		width: 100%;
		height: 100%;
		background: rgba(142,141,140,0.82);
		opacity: 1;
		position: fixed;
		top: 0;
		left: 0;
		.model-box{
			width: 100%;
			height: 320rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			.model-title{
				padding: 30rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.shuoming{
				padding: 0 40rpx 20rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
			.btn-know{
				height: 116rpx;
				line-height: 116rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7200;
				border-top: 1px solid #F2F2F2;
			}
		}
	}
	.regressiveintegral {
		padding: 40rpx;

		.shop-box {
			width: 100%;
			height: 220rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			padding: 30rpx;

			.shop-box-bottom {
				display: flex;

				.shop-box-bottom-img {
					width: 160rpx;
					height: 160rpx;
				}

				.shop-box-right {
					width: 420rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.specs {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin: 20rpx 0 22rpx;
					}

					.paidintegral {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						text-align: right;
					}
				}
			}
		}

		.instructions {
			width: 100%;
			height: 180rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20rpx;
			display: flex;
			padding: 10rpx 20rpx;
			.instructions-title{
				width: 240rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
		
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
			background: #FF7200;
			opacity: 1;
			border-radius: 0px;
			line-height: 88rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: 400;
		}
	}
</style>
